<%@page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css"
	href="<%=request.getContextPath()%>/easyui/themes/myself/easyui.css" />
<link rel="stylesheet" type="text/css"
	href="<%=request.getContextPath()%>/easyui/themes/icon.css" />
<%@ include file="../common/taglibs.jsp"%>
<%@ include file="../common/meta.jsp"%>
<script>
	$(function() {
		$("#userTable").datagrid({
			pagination : true, //分页显示 
			loadMsg : '正在加载...',
			rownumbers : true,
			fitColumns : true,
			fit : true,
			height : 'auto',
			singleSelect: false,
			url : './list.action',
			sortName: 'staffNo',
			queryParams : {
				"criteria.staffNo" : $("#staffNo").combobox('getValue'),
				"criteria.staffName" : $("#staffName").val(),
				"criteria.deptId" : $("#deptName").combobox('getValue'),
				"criteria.active" : $("#active").combobox('getValue')
			},
			frozenColumns:[[{
				field : 'ck',
				checkbox : true
			},{
				title : '账号',
				field : 'staffNo',
				width : 80
			}]],
			columns : [ [ {
				field : 'id',
				hidden : true
			}, {
				field : 'staffName',
				title : '姓名',
				width : 100,
				sortable : true
			}, {
				field : 'deptName',
				title : '部门',
				width : 40,
				sortable : true
			}, {
				field : 'sex',
				title : '性别',
				width : 40,
				align: 'center',
				formatter : function(value, row, index) {
					if (value == 'F')
						return '女';
					if (value == 'M')
						return '男';
					return '';
				},
				sortable : true
			}, {
				field : 'employDate',
				title : '入职日期',
				width : 80,
				align : 'center',
				sortable : true,
				formatter : function(value, row, index) {
					if (value == null)
						return;
					return value.replace('T', ' ');
				}
			} ] ],
			toolbar : [//工具栏上定义按钮 
			{
				id : 'btnadd',
				text : '增加',
				iconCls : 'icon-add',
				handler : function() {
					openNewWindows();

				}
			}, {
				id : 'btndel',
				text : '删除',
				iconCls : 'icon-remove',
				handler : function() {
					//删除选择的记录 
					delStudent();
				}
			}, {
				id : 'btnedit',
				text : '修改',
				iconCls : 'icon-edit',
				handler : function() {
					//修改层的样式，是div 显示 
					$("#editStudentMessage").css({
						display : 'block'
					});
					//模态窗体显示 
					openEditStutable();
				}
			} ]
		});
		$('#staffNo').combobox({   
            url: '../dict/get.action?category=STAFF',   
            valueField: 'optionValue',   
            textField: 'optionText'  
        });  
		$('#active').combobox({   
            url: '../dict/get.action?category=STAFF_STATUS',   
            valueField: 'optionValue',   
            textField: 'optionText'  
        });  
		$('#deptName').combotree({   
            url: '../dept/list.action',   
            valueField: 'optionValue',   
            textField: 'optionText'  
        });  
	});
	
	function queryData() {
		$('#userTable').datagrid({
			queryParams : {
				"criteria.staffNo" : $("#staffNo").combobox('getValue'),
				"criteria.staffName" : $("#staffName").val(),
				"criteria.deptId" : $("#deptName").combobox('getValue'),
				"criteria.active" : $("#active").combobox('getValue')
			}
		}).datagrid('load');
	}

	//将数据转化为 datagrid 数据 格式 
	function xorderListToGridData(msg) {
		var encoded = $.toJSON(msg)
		var griddata = $.evalJSON(encoded);
		return griddata;
	}

	//add 事件 
	function openNewWindows() {
		$('#dlg').dialog('open').dialog('setTitle', '新增用户');
		$('#content').attr('src','./edit.action?operate=insert&staff.staffNo=')
	}

	//Ok 事件 
	function addStudentMessage() {
		//得到表格中的数据 
		var stuData = $("#studentTable").datagrid("getData");
		var ids = $("#item_id").val();

		$.ajax({
			type : 'post',
			url : './save.action',
			data : {
				"data.itemName" : $("#item_nm").val(),
				"data.itemCd" : $("#item_cd").val(),
				"data.itemId" : $("#item_id").val()
			},
			success : function(msg) {
				var griddata = xorderListToGridData(msg);
				var data = griddata.data;
				if (griddata.success) {
					if (ids == '') {
						stuData.total++;
						//加载行 
						stuData.rows.push(data);
						$("#studentTable").datagrid("loadData", stuData);
					} else {
						for ( var i = 0; i < stuData.rows.length; i++) {
							//如果 表格中的Id 和要进行修改的Id 相同的话 就进行修改 
							if (stuData.rows[i].id == ids) {
								$('#studentTable').datagrid('updateRow', {
									index : i,
									row : data
								});
							}
						}
					}
					$('#dlg').dialog('close');
				} else {
					$.messager.show({
						title : 'Error',
						msg : griddata.actionMessages[0]
					});
				}
			}
		});
	}

	//del 事件 
	function delStudent() {

		//得到所有的数据 
		var stuData = $("#studentTable").datagrid("getData");
		//得到选中的数据 
		var rows = $("#studentTable").datagrid("getSelections");
		if (rows.length == 0) {
			$.messager.alert("系统提示", "请选择要删除的行！", 'info');
			return;
		}

		if (confirm('确定删除 这' + rows.length + '条记录?')) {
			var ids = [];
			for ( var i = 0; i < rows.length; i++) {
				for ( var j = 0; j < stuData.rows.length; j++) {
					if (stuData.rows[j].id == rows[i].id) {
						ids.push(rows[i].id);
						//$("#studentTable").datagrid("deleteRow", j);
					}
				}
			}

			$.ajax({
				type : 'post',
				url : './delete.action',
				data : {
					ids : ids.join(',')
				},
				success : function(msg) {
					var griddata = xorderListToGridData(msg);
					if (griddata.success) {
						$.messager.alert('Info', 'Delete successfully!');
						$("#studentTable").datagrid("load");
					} else {
						$.messager.show({
							title : 'Error',
							msg : griddata.actionMessages[0]
						});
					}
				}
			});
		}
	}

	//edit 事件 
	function openEditStutable() {
		var rows = $("#studentTable").datagrid('getSelections');
		if (rows == 0) {
			$.messager.alert("系统提示", "请选择要编辑的行！", 'info');
			return;
		}

		if (rows.length > 1) {
			$.messager.alert("系统提示", "对不起，该操作只能选择一行！", 'error');
			return;
		}

		for ( var i = 0; i < rows.length; i++) {
			if (rows[i].id != "") {
				$("#item_id").val(rows[i].itemId);
				$("#item_nm").val(rows[i].itemName);
				$("#item_cd").val(rows[i].itemCd);
			}
		}
		$("#dlg").dialog('open').dialog('setTitle', 'Edit User');
	}
</script>
</head>
<body class="easyui-layout" style="background: #0B5F3D;">
	<div data-options="region:'north',border:false" style="padding: 5px">
		<fieldset>
        	<legend>查询条件</legend>
		<form id="userForm">
			<table width="100%" cellpadding="2px">
				<tr>
					<td nowrap="nowrap">账号</td>
					<td><input type="text" id="staffNo" value="${criteria.staffNo}" style="width:150px;" class="easyui-combobox" /></td>
					<td nowrap="nowrap">姓名</td>
					<td><input class="easyui-validatebox" type="text" id="staffName" value="${criteria.staffName}" /></td>
				</tr>
				<tr>
					<td nowrap="nowrap">部门</td>
					<td>
					<input type="text" id="deptName" style="width:150px;" class="easyui-combobox" value="${criteria.deptId}"/></td>
					<td nowrap="nowrap">状态</td>
					<td><input class="easyui-combobox" type="text" id="active" value="${criteria.active}" /></td>
				</tr>
			</table>
		</form>
		</fieldset>
		<table width="100%" cellpadding="2px">
			<tr>
				<td colspan="4" align="right"><a href="#"
					class="easyui-linkbutton" onclick="queryData();"
					style="width: 50px">查询</a> <a href="#" class="easyui-linkbutton"
					onclick="$('#userForm').form('clear');" style="width: 50px">重置</a>
				</td>
			</tr>
		</table>
	</div>
	<div data-options="region:'center',border:false">
		<table id="userTable">
		</table>
	</div>
	<div id="dlg" class="easyui-dialog" style="width: 500px;height: 300px;padding: 5px;" closed="true">
		<iframe id="content" scrolling="no" frameborder="0" style="width:100%;height:100%;"></iframe>
	</div>
</body>
</html>
